<template>
    <el-dialog
            title="流程数据信息"
            v-model="dialogVisible"
            destroy-on-close
            width="70%"
    >
        <el-alert
                title="使用说明"
                type="warning"
                description="以下流程信息可以被存储起来，方便下一次流程加载"
                show-icon
                close-text="知道了"
        >
        </el-alert>
        <br/>
        <code-mirror basic :lang="lang" v-model="codeVal" style="height: 400px;" :extensions="extensions"/>
    </el-dialog>
</template>

<script>
    // import 'codemirror/lib/codemirror.css'
    // import { codemirror } from 'vue-codemirror'
    // import 'codemirror/mode/javascript/javascript.js';
    import CodeMirror from 'vue-codemirror6'
    import { json } from '@codemirror/lang-json';
    import { oneDark } from '@codemirror/theme-one-dark'

    export default {
        components:{CodeMirror},
        props: {
            data: Object,
        },
        computed:{
            codeVal() {
                return JSON.stringify(this.data, null, '\t');
            },
        },
        data() {
            return {
                extensions : [oneDark],
                lang:json(),
                dialogVisible: false,
                flowJsonData: {},
                options: {
                    mode: {name: "javascript", json: true},
                    lineNumbers: true
                }
            }
        },
        methods: {
            init() {
                debugger
                this.dialogVisible = true
                this.flowJsonData = JSON.stringify(this.data, null, 4).toString()
            }
        }
    }
</script>
<style>
.cm-editor {
  height: 100%;
}
</style>
